<extend name="Public:base" />
<block name="title">新闻动态</block>
<block name="content">
<!--主要内容-->
    <input type="hidden" name="page" id="page">
    <div class="weui-panel__bd">
        <div class="weui-navbar">
            <foreach name="sort" item="vo">
                <!--<a href="__MODULE__/Article/index/cateid/{$vo.id}" class='weui-navbar__item <if condition="$cateid eq $vo[id]">weui-bar__item_on</if>'>-->
                <a href="javascript:;" class='weui-navbar__item' data-id="{$vo.id}">
                    {$vo.title}
                </a>
            </foreach>
        </div>
        <div class="weui-tab__panel">
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" name="title" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required AUTOCOMPLETE="off"/>
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText">
                        <i class="weui-icon-search"></i>
                        <span>搜索</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
            <div class="weui-cells searchbar-result" id="searchResult" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;" >
                <!--<div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd weui-cell_primary">
                        <a>实时搜索文本</a>
                    </div>
                </div>
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>-->
            </div>
            <div class="page__bd">
                <div id="search_Result">
                <!--<if condition="$list neq null">-->
                    <!--<foreach name="list" item="vo">-->
                        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg gonggao_a">
                            <div class="weui-media-box__hd gonggao_img">
                                <img class="weui-media-box__thumb" src="{$vo.titlepic}" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title gonggao_tit">{$vo.title}</h4>
                                <ul class="weui-media-box__info">
                                    <!--<li class="weui-media-box__info__meta list_hot">人民网</li>-->
                                    <li class="weui-media-box__info__meta">{$vo.addtime|todate}</li>
                                    <li class="weui-media-box__info__meta cor_red fr list_mor">查看详情</li>
                                </ul>
                            </div>
                        </a>
                    <!--</foreach>
                    <else />
                    <tr style="height:32px"><td colspan="9">暂无新闻！</td></tr>
                </if>-->
            </div>
                <div id="showmsg"></div>
                <input type="button" id="more" class="listmore" value="加载更多">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var page = $("#page").val();
        if(!page){
            page = 1;
        }
        $(".weui-navbar").children(":first").addClass('weui-bar__item_on');
        article_list(page,1);
        $("#more").click(function(){
            var page = $("#page").val();
            var cateid = $(".weui-bar__item_on").attr('data-id');
            article_list(page,cateid);
        });
        $(".weui-navbar__item").click(function(){
            var cateid = $(this).attr('data-id');
            $(".weui-navbar__item").removeClass('weui-bar__item_on');
            $(this).addClass('weui-bar__item_on');
            $("#search_Result").html('');
            $("#more").show();
            article_list(page,cateid);
        });
        function article_list(page,cateid){
            $.ajax({
                type:'post',
                url:'__MODULE__/Article/index',
                data:{page:page,cateid:cateid},
                cache:false,
                dataType:'json',
                success:function(res){
                    if (res.code == 0) {
                        var arr = res.data;
                        var str = '';
                        $.each(arr, function (i) {
                            str += '<a href="__MODULE__/Article/articledetail/id/'+this.id+'" class="weui-media-box weui-media-box_appmsg gonggao_a"><div class="weui-media-box__hd gonggao_img"><img class="weui-media-box__thumb" src="' + this.titlepic + '" alt=""></div><div class="weui-media-box__bd"> <h4 class="weui-media-box__title gonggao_tit">' + this.title + '</h4><ul class="weui-media-box__info"><li class="weui-media-box__info__meta">' + this.addtime + '</li><li class="weui-media-box__info__meta cor_red fr list_mor">查看详情</li></ul></div></a>';
                        });
                        $("#page").val(res.page);
                        $("#search_Result").append(str);
                    } else {
                        var str2 = '';
                        str2 += '<div class="nomore"><p>' + res.msg + '</p></div>';
                        $("#search_Result").append(str2);
                        $("#more").hide();
                    }
                }
            });
        }
    </script>
    <script type="text/javascript" class="searchbar js_show">
        $(function(){
            var $searchBar = $('#searchBar'),
                $searchResult = $('#searchResult'),
                $searchText = $('#searchText'),
                $searchInput = $('#searchInput'),
                $searchClear = $('#searchClear'),
                $searchCancel = $('#searchCancel');
            var title = $('#searchInput').val();

            function hideSearchResult(){
                $searchResult.hide();
                $searchInput.val('');
            }
            function cancelSearch(){
                hideSearchResult();
                $searchBar.removeClass('weui-search-bar_focusing');
                $searchText.show();
            }

            $searchText.on('click', function(){
                $searchBar.addClass('weui-search-bar_focusing');
                $searchInput.focus();
            });
            $searchInput
                .on('blur', function () {
                    if(!this.value.length) cancelSearch();
                })
                .on('input', function(){
                    if(this.value.length >= 1) {
                        /**
                         * 边输入边搜索
                         * */
                        var cateid = $(".weui-bar__item_on").attr('data-id');
                        search_title(this.value,cateid);
                        //$searchResult.show();
                    } else {
                        $searchResult.hide();
                    }
                })
            ;
            $searchClear.on('click', function(){
                hideSearchResult();
                $searchInput.focus();
            });
            $searchCancel.on('click', function(){
                cancelSearch();
                $searchInput.blur();
            });
        });
        /**
         * 边输入边搜索
         * */
//        $(document).on('keyup','#searchInput',function(){
//            alert(111);
//            //var title = $(this).val();
//            //search_help(title);
//        });
        function search_title( title , cateid){
            $.ajax({
                type: 'get',
                url: '__MODULE__/Article/title_search',
                data: {title:title,cateid:cateid},
                cache: false,
                dataType: 'json',
                success: function(res){
                    if (res.code == 0) {
                        var arr = res.data;
                        var str = '';
                        $("#searchResult").show();
                        $("#searchResult").html('');
                        $.each(arr, function (i) {
                            str += '<div class="weui-cell weui-cell_access"><div class="weui-cell__bd weui-cell_primary"><a href="__MODULE__/Article/articledetail/id/'+ this.id +'">' + this.title + '</a></div></div>';
                        });
                        $("#searchResult").html(str);
                    } else {
                        var str2 = '';
                        str2 += '<div class="weui-cell weui-cell_access"><div class="weui-cell__bd weui-cell_primary"><p>' + res.msg + '</p></div></div>';
                        $("#searchResult").show();
                        $("#searchResult").html('');
                        $("#searchResult").html(str2);
                    }
                }
            });
        }
    </script>
<!--底部-->
</block>